import { Input, Select, InputNumber, DatePicker, Radio } from 'antd';
import { useState } from 'react';

import type { PropsType, TypeMapRecordType } from '../types/ItemCard.type';

const { RangePicker } = DatePicker;

// * 范围数字选择框
const RangeInputNumber = (props: PropsType) => {
  const { value } = props;
  const [values, setValues] = useState<Array<number | null>>([value?.[0] ?? null, value?.[1] ?? null]);
  const onChange = (values: Array<number | null>) => {
    setValues(values);
    props.onChange(values);
  };
  return (
    <div className="flex items-center">
      <InputNumber
        prefix="￥"
        className="w-[48%]"
        max={values[1] ?? undefined}
        {...props}
        value={values[0]}
        onChange={value => onChange([value, values[1]])}
      />
      <span className="mx-[1%]">-</span>
      <InputNumber
        prefix="￥"
        className="w-[48%]"
        min={values[0] ?? undefined}
        {...props}
        value={values[1]}
        onChange={value => onChange([values[0], value])}
      />
    </div>
  );
};

// 使用字面量类型来精确限制typeMap的key
const typeMap: TypeMapRecordType = {
  input: Input,
  select: Select,
  inputNumber: InputNumber,
  datePicker: DatePicker,
  rangePicker: RangePicker,
  rangeInputNumber: RangeInputNumber,
  radio: Radio.Group,
};
/**
 * 自定义表单时，经常会封装一些复杂的控件
 * 然而 像 Input 这样的输入控件，不直接作为 Form.Item 的子元素的时候，值就会获取不到。
 * 重点在 给 Input 绑定 props，使其成为受控组件，props 包含 value 属性 和 onChange 方法。
 * 通过 props.onChange 方法为控件更新值。可以参考受控组件的实现方式
 */
const ItemCard = (props: PropsType) => {
  const { type } = props;
  const Component = typeMap[type];
  if (!Component) {
    throw new Error(`Unsupported type: ${type}`);
  }
  return <Component className="w-full" {...props} />;
};

export default ItemCard;
